<template>
	<comRoot>
		<template #page>
			<view class="person-info-page relative">
				<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
					:src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" />
				<comDetailNavigateBack title="合成福袋" />
			
				<view class="basicinfo-page relative font-hanserif-bold">
					<view v-if="isShowBagInput" class="basicinfo-box relative font-hanserif-regular">
			
						<view class="item relative">
							<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/input-bg.png`"
								class="bg" />
			
							<view class="flex content">
								<view class="lable">福袋个数</view>
								<view class="flex flex-all-center flex-full">
									<input v-if="isShowNumInput" v-model="form.bagNums" type="number" :maxlength="bagRule.bagNumsMax.length" class="value truncate"
										placeholder="填写福袋个数" placeholder-style="color: rgba(206, 218, 255, 1)"
										placeholder-class="placeholder_class"
										@blur="setInputFun('bagNums')"
									/>
									<view class="icon-right">个</view>
								</view>
							</view>
			
							<view class="remark-txt">注: 最低{{ bagRule.bagNumsMin }}个</view>
							<!-- <view class="remark-txt">注:最低{{ bagRule.bagNumsMin }}个，最高{{ bagRule.bagNumsMax }}个</view> -->
						</view>
			
						<view class="item relative" style="top: 60rpx;">
							<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/input-bg.png`"
								class="bg" />
			
							<view class="flex content">
								<view class="lable">总金额</view>
								<view class="flex flex-all-center flex-full">
									<input v-if="isShowFeeInput" v-model="form.feeNums" type="number" :maxlength="bagRule.feeNumsMax.length" class="value truncate" 
										placeholder="0.00" placeholder-style="color: rgba(206, 218, 255, 1)" 
										placeholder-class="placeholder_class_amount"
										@blur="setInputFun('feeNums')"
									/>
								</view>
							</view>
			
							<view class="remark-txt">注: 最低{{ bagRule.feeNumsMin }}，最高{{ bagRule.feeNumsMax }}</view>
						</view>
			
						<view class="item relative" style="top: 120rpx;">
							<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/input-bg.png`"
								class="bg" />
			
							<view class="flex content">
								<view class="lable">祝福语</view>
								<view class="flex flex-all-center flex-full">
									<input v-model="form.remark" :maxlength="bagRule.remarkLength" class="value truncate" placeholder="恭喜发财,大吉大利"
										placeholder-style="color: rgba(206, 218, 255, 1)"
										placeholder-class="placeholder_class"
										@blur="setInputFun('remark')"
									/>
								</view>
							</view>
						</view>
			
					</view>
					
					<view @click="clickSetPopup" class="red-tips flex-align-items-center relative">
						<image
							v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
							:src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/tip-icon.png`"
							class="tips-item-icon" />
						<view class="tips-item-txt">合成福袋规则说明</view>
					</view>
					
					<!-- #ifdef APP-PLUS -->
					<view class="page-bottom-view relative flex-all-center flex-direction-column font-hanserif-regular"
						style="bottom: unset;top: 228rpx;"
					>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="page-bottom-view fixed flex-all-center flex-direction-column font-hanserif-regular">
					<!-- #endif -->
						<view class="fee-nums-txt flex-all-center font-hanserif-bold">
							<view class="fee-nums-txt flex relative" style="z-index: 2;">
								<view class="fee-nums-txt-left relative">￥</view>
								<view class="fee-nums-txt-right">{{ feeNumsTxt || '0.00' }}</view>
							</view>
							<!-- <view class="fee-nums-txt-border absolute" style="z-index: 1;">
								<view class="fee-nums-txt-left">￥</view>
								<view class="fee-nums-txt-right">{{ feeNumsTxt || '0.00' }}</view>
							</view> -->
						</view>
			
						<view class="submit-btn relative" @click="submit">
							<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/submit-btn-bg.png`"
								class="bg" />
							<view class="relative">
								<!-- 合成福袋 -->
							</view>
						</view>
			
						<view class="record-box" @click="gooDetailPage">
							查看福袋记录
						</view>
			
					</view>
				</view>
				
				<!-- 规则 -->
				<comTextPopup v-model="isShowTxt">
					<template #title>
						<view class=""> {{ upPopName }} </view>
					</template>
					<view class="" v-html="rulePopupTxt"></view>
				</comTextPopup>
				
				<comPromptPopup
					v-model="confirmDialog"
					cancelText="取消"
					confirmText="确定" 
					@setSureFun="confirmBtn">
					<template>
						<view class="redpack-box absolute flex-direction-column flex-all-center font-hanserif-bold">
							<view class="redpack-box-top flex-align-items-baseline text-nowrap">
								消耗 
								<view style="color: #fe7000;"><text style="font-size: 58rpx;"> {{ form.feeNums }} </text>机能</view>
								合成
								<view style="color: #fe7000;"><text style="font-size: 58rpx;"> {{ form.feeNums }} </text>飞机币</view>
								福袋
							</view>
							<view class="redpack-box-bottom" style="margin-top: 30rpx;font-size: 24rpx;color: #000">当前拥有 {{ userInfo.balance || 0 }} 机能</view>
						</view>
					</template>
				</comPromptPopup>
				
				<!-- 分享弹框 -->
				<view class="maskview fixed font-hanserif-bold" v-if="shareDialog" :zoom="true" @click="shareDialog = true">
					<view class="share-redpack-content absolute-center flex-justify-content-center" @click.stop="shareDialog = true">
						<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/share-redpack-bg.png`" mode=""></image>
						
						<view style="width: 100%;top: 140rpx;" class="absolute flex-direction-column flex-all-center">
							<view class="user-info-box flex-all-center">
								<view class="record-cover flex-all-center relative">
									<image class="record-cover-img" :src="userInfo.avatar" mode=""></image>
									<image class="absolute" v-if="userInfo.vip_cover" :src="userInfo.vip_cover" mode="heightFix"
										:style="{
											'border-radius': 'unset',
											'width': 'auto',
											'top': '-18rpx',
											'left': '-20rpx',
											'right': 0,
											'height': '110rpx',
											'margin': 'auto',
											'z-index': 1,
										}"></image>
								</view>
								
								<view class="relative truncate" style="max-width: 70%;">
									{{ userInfo.nickname || 'Ta' }}发出的福袋
								</view>
							</view>
							
							<view class="relative flex-all-center truncate" style="width: 80%;color: #FFDA4D;">
								{{ form.remark || '恭喜发财,大吉大利' }}
							</view>
						</view>
						
						<view class="scale-redpack-rotate absolute flex-all-center" style="top: 500rpx;">
							<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/share-redpack-light.png`"
								class="absolute share-redpack-rotate"
								/>
							
							<button open-type="share" class="flex-all-center absolute"
								@click.stop="share">
								<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/share-redpack-txt.png`"
									style="width: 202rpx;height: 202rpx;" />
							</button>
						</view>
						
						<view class="flex-all-center absolute share-redpack-record" @click.stop="gooDetailPage">查看福袋合成记录</view>
					
						<image @click.stop="closeShareDialog" v-if="commonConfigs && commonConfigs.domainFrontFileLink"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/share-redpack-close.png`"
							class="absolute"
							style="width: 60rpx;height: 60rpx;bottom: -100rpx;" />
					</view>
				</view>
			
			</view>
		</template>
	</comRoot>
</template>

<script>
	import {
		setRedPacketMakeApi,
		getContentHomeApi,
		getRedPacketPoolApi,
	} from '@/setupproject/INTERFACE';
	
	import {
		setAsyncFunWait,
	} from '@/setupproject/TOOLS_FUN';

	import store from '@/store';
	import {
		ACTIONS
	} from '@/store/modules/userStore';

	export default {
		name: 'redEnvelopePage',
		data() {
			return {
				confirmDialog: false, // 确认弹窗
				
				shareId: '',
				shareDialog: false, // 分享弹窗
				
				upPopName: '合成福袋规则说明',
				isShowTxt: false,
				rulePopupTxt: '',
				
				bagRule: {
					bagNumsMin: "1",
					bagNumsMax: "1000",
					feeNumsMin: "1.00",
					feeNumsMax: "5000.00",
					remarkLength: 20,
				},

				form: {
					bagNums: '',
					feeNums: '',
					remark: '',
				},
				
				isFlag: false,
				
				isShowBagInput: true,
				isShowNumInput: true,
				isShowFeeInput: true,
			};
		},
		computed: {
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
			userInfo() {
				return store.getters.userInfo;
			},
			feeNumsTxt() {
				return parseFloat(this.form.feeNums || 0).toFixed(2);
			},
		},
		onLoad() {
			this.getRedPacketPoolApi();
		},
		onShareAppMessage(e) {
			if (e.from === 'menu') {
				this.$store.commit('SHARE_INFO_SET_FUN', {
					title: this.form.remark || '恭喜发财,大吉大利',
					path: `/secondary/shareEnvelopePage/shareEnvelopePage?id=${this.shareId}`,
					imageUrl: `${this.commonConfigs.domainFrontFileLink}/files/images/redEnvelope/red-envelope-share.png`,
					content: '',
					desc: ''
				});
			}
			uni.showLoading({
				title: '',
				mask: false
			});
			const promise = new Promise((resolve) => {
				setTimeout(() => {
					const {
						shareObjData
					} = this.$store.getters;
					resolve(shareObjData)
					uni.hideLoading();
				}, 200);
			});
		
			return {
				promise
			};
		},
		methods: {
			async getRedPacketPoolApi() {
				const { data, code } = await getRedPacketPoolApi();
			
				if (code !== 200) {
					return;
				}
				
				if(data && data.number_min) {
					this.bagRule.bagNumsMin = String(data.number_min);
				}
				
				if(data && data.min) {
					this.bagRule.feeNumsMin = String(data.min);
				}
				
				if(data && data.max) {
					this.bagRule.feeNumsMax = String(data.max);
				}
				
			},
			
			async share() {
				await this.$store.commit('SHARE_INFO_SET_FUN', {
					title: this.form.remark || '恭喜发财,大吉大利',
					path: `/secondary/shareEnvelopePage/shareEnvelopePage?id=${this.shareId}`,
					imageUrl: `${this.commonConfigs.domainFrontFileLink}/files/images/redEnvelope/red-envelope-share.png`,
					content: '',
					desc: ''
				});
				
				// await setAsyncFunWait(500);
				// await this.closeShareDialog();
			},
			
			gooDetailPage() {
				uni.navigateTo({
					url: `/secondary/redEnvRecordPage/redEnvRecordPage?index=1`
				});
			},
			
			closeShareDialog() {
				this.shareDialog = false;
				this.shareId = '';
				
				this.isShowBagInput = false;
				
				this.$nextTick(async () => {
					await setAsyncFunWait(1);
					this.isShowBagInput = true;
					
					this.form.bagNums = '';
					this.form.feeNums = '';
					this.form.remark = '';
					this.$forceUpdate();
				});
			},
			
			async clickSetPopup() {
				this.isShowTxt = true;

				this.rulePopupTxt = '';
			
				const { data, code } = await getContentHomeApi({ type: 82 });

				this.rulePopupTxt = data.content;
			},
			
			// 保存
			async submit() {
				if(!this.form.bagNums) {
					return uni.showToast({
						title: '未填写「福袋个数」',
						icon: 'none',
						mask: true,
						duration: 1500
					});
				}
				
				if(!this.form.feeNums) {
					return uni.showToast({
						title: '未填写「福袋金额」',
						icon: 'none',
						mask: true,
						duration: 1500
					});
				}
				
				await store.dispatch(ACTIONS.USER_INFO_GET_FUN);
				this.confirmDialog = true;
			},
			
			// 确认按钮
			async confirmBtn() {
				if(this.isFlag) return;
				this.isFlag = true;
				
				const {
					msg,
					code,
					data
				} = await setRedPacketMakeApi({
					num: this.form.bagNums, // num	是	string	数量
					money: this.form.feeNums, // money	是	string	金额
					title: this.form.remark || '恭喜发财,大吉大利', // title	是	string	标题
				});
			
				this.confirmDialog = false;
			
				if (code !== 200) {
					this.isFlag = false;
					return uni.showToast({
						icon: 'none',
						title: msg
					});
				}
			
				// uni.showToast({
				// 	icon: 'success',
				// 	title: msg
				// });
				
				// this.form.bagNums = '';
				// this.form.feeNums = '';
				// this.form.remark = '';
				
				this.shareId = data.ids;
				this.shareDialog = true;
				this.isFlag = false;
			},
			
			/**
			* @method setInputFun
			* @description input 聚焦时的检验函数
			* @param formParam form表单数据的字段名称
			* @returns null
			* @example setInputFun();
			*/
			async setInputFun(formParam) {
				if(formParam === 'remark') return;
				
				if(formParam === 'bagNums' && this.form[formParam] !== '') {
					this.isShowNumInput = false;
					
					if (Number(this.form[formParam]) > Number(this.bagRule.bagNumsMax)) {
						await setAsyncFunWait(1);
						this.isShowNumInput = true;
						
						let bagNums = Number(this.bagRule.bagNumsMax);
						this.$nextTick(async () => {
							this.form.bagNums = bagNums;
							this.$forceUpdate();
						});
						
						return uni.showToast({
							title: `福袋个数不能超过${this.bagRule.bagNumsMax}`,
							icon: 'none',
							mask: true,
							duration: 1500
						});
					}
					
					if (Number(this.form[formParam]) < Number(this.bagRule.bagNumsMin)) {
						await setAsyncFunWait(1);
						this.isShowNumInput = true;
						
						let bagNums = Number(this.bagRule.bagNumsMin);
						this.$nextTick(async () => {
							this.form.bagNums = bagNums;
							this.$forceUpdate();
						});
						
						return uni.showToast({
							title: `福袋个数不能低于${this.bagRule.bagNumsMin}`,
							icon: 'none',
							mask: true,
							duration: 1500
						});
					}
					
					this.isShowNumInput = true;
				}
				
				if(formParam === 'feeNums' && this.form[formParam] !== '') {
					this.isShowFeeInput = false;
					if (Number(this.form[formParam]) > Number(this.bagRule.feeNumsMax)) {
						// this.$set(this.form, formParam, parseFloat(this.bagRule.feeNumsMax).toFixed(2));
						
						await setAsyncFunWait(1);
						this.isShowFeeInput = true;
						
						let feeNums = Number(this.bagRule.feeNumsMax);
						this.$nextTick(async () => {
							this.form.feeNums = feeNums;
							this.$forceUpdate();
						});
						
						return uni.showToast({
							title: `福袋金额不能超过${this.bagRule.feeNumsMax}`,
							icon: 'none',
							mask: true,
							duration: 1500
						});
					}
					
					if (Number(this.form[formParam]) < Number(this.bagRule.feeNumsMin)) {
						// this.$set(this.form, formParam, parseFloat(this.bagRule.feeNumsMin).toFixed(2));
						
						await setAsyncFunWait(1);
						this.isShowFeeInput = true;
						
						let feeNums = Number(this.bagRule.feeNumsMin);
						this.$nextTick(async () => {
							this.form.feeNums = feeNums;
							this.$forceUpdate();
						});
						
						return uni.showToast({
							title: `福袋金额不能低于${this.bagRule.feeNumsMin}`,
							icon: 'none',
							mask: true,
							duration: 1500
						});
					}
					
					this.isShowFeeInput = true;
				}
				
			},
			
		}
	};
</script>

<style scoped lang="scss">
	.person-info-page {
		width: 100%;
		height: 100vh;

		.basicinfo-box {
			width: 710rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			margin: 0 auto;
			margin-top: 58rpx;

			.item {
				width: 100%;
				height: 112rpx;
				padding: 0 30rpx;
				margin-bottom: 40rpx;
				.content {
					align-items: center;
					justify-content: space-between;
					padding: 36rpx 0;
					margin-bottom: 28rpx;
					padding-bottom: 16rpx;
					.lable {
						width: 20%;
						font-weight: bold;
					}

					.value {
						width: 90%;
						text-align: right;
						color: #63FFF7;
					}

					.icon-right {
						margin-left: 16rpx;
						color: #FFFFFF;
					}
					/deep/.placeholder_class {
						color: #63FFF7;
					}
					/deep/.placeholder_class_amount {
						color: #CEDAFF;
					}
				}

				.remark-txt {
					width: 100%;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: right;
				}
			}
		}
		
		.red-tips {
			top: 108rpx;
			padding-left: 24rpx;
			.tips-item-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}
			.tips-item-txt {
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.page-bottom-view {
			bottom: 0;
			width: 100%;
			color: #FFF;

			.fee-nums-txt {
				font-size: 104rpx;
				color: #63FFF7;
				font-weight: bold;
				// font-style: normal;
				// background: linear-gradient(to right, #FFF8AF, #FFB300);
				// background: radial-gradient(0deg, #FFF8AF 0%, #FFB300 100%);
				// text-stroke: 2rpx #4470FF;
				-webkit-text-stroke: 4rpx #4470FF;
				// -webkit-background-clip: text;
				/* 将渐变应用于文本 */
				// -webkit-text-fill-color: transparent;
				/* 设置文本颜色为透明 */
				.fee-nums-txt-left {
					font-size: 64rpx ;
					top: 44rpx;
				}

				.fee-nums-txt-right {
					font-size: 104rpx;
				}
			}
			
			.fee-nums-txt-border {
				font-size: 46rpx;
				color: transparent;
				text-stroke: 2rpx #5C2900;
				-webkit-text-stroke: 2rpx #5C2900;
				
				.fee-nums-txt-left {}
				
				.fee-nums-txt-right {
					font-size: 96rpx;
				}
			}

			.submit-btn {
				width: 512rpx;
				height: 76rpx;
				font-size: 36rpx;
				color: #FEF7DD;
				font-weight: bold;
				line-height: 123rpx;
				text-align: center;
			}

			.record-box {
				font-size: 24rpx;
				margin-top: 28rpx;
				margin-bottom: 128rpx;
				font-weight: bold;
				color: #FFFFFF;
			}

			.bag-tips-txt {
				font-size: 26rpx;
				color: #FFCEA6;
				margin-bottom: 68rpx;
				font-weight: bold;
			}

		}

		// 弹框
		.maskview {
			background: rgba(0, 0, 0, 0.8);
			overflow: hidden;
			color: #fff;
			top: 0;
			left: 0;
			z-index: 10000;
			width: 100%;
			height: 100vh;
			
			.redpack-content {
				font-size: 36rpx;
				width: 621rpx;
				height: 334rpx;
				font-weight: bold;
				.redpack-box {
					width: 100%;
					height: 182rpx;
					padding: 0 50rpx 0 20rpx;
					overflow-y: auto;
					left: 16rpx;
					top: 32rpx;
					font-size: 30rpx;
					color: rgba(58, 25, 0, 1);
				}
				.cancel-txt-btn {
					width: 50%;
					height: 92rpx;
					left: 16rpx;
					bottom: 26rpx;
					color: rgba(115, 115, 115, 1);
				}
				.sure-txt-btn {
					width: 50%;
					height: 92rpx;
					right: 16rpx;
					bottom: 26rpx;
					color: rgba(254, 112, 0, 1);
					font-size: 36rpx;
					font-weight: bold;
				}
			}
			
			.share-redpack-content {
				font-size: 36rpx;
				width: 580rpx;
				height: 725rpx;
				font-weight: bold;
				
				.user-info-box {
					width: 100%;
					height: 110rpx;
					font-size: 32rpx;
					color: #FFFFFF;
					
					.record-cover {
						width: 76rpx;
						height: 76rpx;
						margin-right: 28rpx;
						border-radius: 100%;
						
						.record-cover-img {
							width: 68rpx;
							height: 68rpx;
							overflow: hidden;
							border-radius: 100%;
						}
					}
				}
				
				.share-redpack-record {
					bottom: 20rpx;
					margin: auto;
					font-weight: 600;
					font-size: 28rpx;
					color: #860F12;
					text-decoration-line: underline;
					z-index: 10;
				}
				
				.scale-redpack-rotate {
					animation: openBoxSize 1.5s 0s infinite;
					-webkit-animation: openBoxSize 1.5s 0s infinite;
					
					@keyframes openBoxSize {
						0% {
							transform: scale(1);
							transform-origin: center;
						}
						
						50% {
							transform: scale(0.8);
							transform-origin: center;
						}
						
						100% {
							transform: scale(1);
							transform-origin: center;
						}
					}
				}
				
				.share-redpack-rotate {
					width: 319rpx;
					height: 319rpx;
					animation: rotateBoxLight 0.4s linear infinite;
					-webkit-animation: rotateBoxLight 0.4s linear infinite;
					
					// 光影背景动画
					@keyframes rotateBoxLight {
						0% {
							transform: rotate(0deg);
						}
					
						100% {
							transform: rotate(360deg);
						}
					}
				}
				
			}
			
		}
		
	}
</style>